<template>
  <div>
    <el-card class="box-card">
      <h2>请先登录</h2>
      <!-- 登陆表单区域
                ref代表当前表单引用对象
               :model 是表格中封装的对象
          -->
      <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules" >
        <el-form-item prop="accountname">
          <el-input  prefix-icon="iconfont iconuser" v-model="loginForm.accountname"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>


  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        accountname: "",
        password: ""
      },
      //定义表单的验证规则
      rules: {
         //定义校验用户名
        accountname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ],
         //定义校验密码
         password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ]
      }
    }
  },

  methods: {
    //表单数据重置
    resetForm() {
      this.$refs.loginFormRef.resetFields()
     },
    login() {
      //获取表单对象之后进行数据校验
      //valid 表示校验的结果 true表示通过  false表示失败
      this.$refs.loginFormRef.validate(async valid => {
        //如果没有完成校验则直接返回
        if(!valid) return

        //如果校验成功,则发起ajax请求
        const {data: result} = await this.$http.post('/user/login',this.loginForm)
        if(result.retcode !== 200) {
          console.log(result)
          return this.$message.error("用户登录失败")
        }else {
          this.$message.success("用户登陆成功")
        }

        //获取用户token信息
        let token = result.data
        window.sessionStorage.setItem("token",token)

        //用户登录成功之后,跳转到home页面
        this.$router.push({ name: 'cjView',params:{accountname:this.loginForm.accountname} })
      })
    }
  }
}
</script>

<style scoped>
.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
  border-top: 10px solid #409eff;
}

.login-title {
  text-align: center;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}

.box-card{
  width: 31.25rem;
  margin: auto;
  margin-top: 100px;
}
</style>
